<script setup lang="ts">
import {Health} from "@/views/types/health.ts";
import {computed, ref} from "vue";
import RecordDialog from "@/views/components/RecordDialog.vue";

const props =defineProps<{
  view:Health
}>();
const isVisible = ref<boolean>(false);
const realColor = computed(() => {
  if (!props.view.status) {
    return "black";
  }
  if (props.view.status === 'yellow') {
    return '#F3A73B'
  }
  return props.view.status;
})
const showDetails = () =>{
  isVisible.value=true;
}
</script>

<template>
  <div>
    <RecordDialog v-if="isVisible" title="健康状态" :records="view.properties" v-model:visible="isVisible"></RecordDialog>
    <div class="item-title"><el-link type="primary" :underline="false" @click="showDetails">健康状态</el-link></div>
    <el-descriptions border :column="4" direction="vertical">
      <el-descriptions-item>
        <template #label>
          <div class="item-label">健康状态</div>
        </template>
        <div class="item-value" :style="{color:realColor}">
          {{view.status}}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="item-label">节点数</div>
        </template>
        <div class="item-value">
          {{view.numberOfNodes}}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="item-label">数据节点数</div>
        </template>
        <div class="item-value">
          {{view.numberOfDataNodes}}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="item-label">激活分片数</div>
        </template>
        <div class="item-value">
          {{view.activeShards}}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="item-label">激活主分片数</div>
        </template>
        <div class="item-value">
          {{view.activePrimaryShards}}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="item-label">重分配分片数</div>
        </template>
        <div class="item-value" :style="{color:view.relocatingShards>0?'#F3A73B':''}">
          {{view.relocatingShards}}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="item-label">初始化分片数</div>
        </template>
        <div class="item-value" :style="{color:view.initializingShards>0?'#F3A73B':''}">
          {{view.initializingShards}}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="item-label">未分配分片数</div>
        </template>
        <div class="item-value" :style="{color:view.unassignedShards>0?'red':''}">
          {{view.unassignedShards}}
        </div>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<style scoped>

.item-title{
  color: var(--el-text-color-primary);
  font-size: 16px;
  font-weight: bold;
  margin-top: 12px;
  margin-bottom: 6px;
}
.item-label {
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}

.item-value {
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}
</style>